<template>
  <div id="app">
    <div class="navbar" ref="navbar">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
      </ul>
    </div>
    <div class="content" ref="content">
      <ul>
        <li v-for="v in list" :key="v.id">
          <dl>
            <dt><img :src="v.url" alt="" /></dt>
            <dd>
              <p>{{ v.title }}</p>
              <p>{{ v.desc }}</p>
            </dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import BScroll from "@better-scroll/core";
export default {
  data() {
    return {
      list: [],
      bs: null,
      isLoad: false
    };
  },
  methods: {
    getList() {
      axios.get("/api/list").then(resp => {
        this.list = this.list.concat(resp.data.data);
      });
    },
    initBS() {
      this.bs = new BScroll(this.$refs.content, {
        probeType: 3
      });
    },
    bindEvent() {
      this.bs.on("scrollStart", () => {
        this.isLoad = false;
      });

      this.bs.on("scroll", e => {
        const maxY = Math.abs(this.bs.maxScrollY);
        const currY = Math.abs(e.y);

        if (maxY - currY <= 20) {
          this.isLoad = true;
        }
      });

      this.bs.on("scrollEnd", () => {
        if (this.isLoad) {
          this.getList();
          this.isLoad = false;
        }
      });
    }
  },
  watch: {
    list() {
      this.$nextTick().then(() => {
        this.bs.refresh();
      });
    }
  },
  mounted() {
    this.getList();
    this.initBS();
    this.bindEvent();

    this.$refs.navbar.firstElementChild.style.width =  this.$refs.navbar.firstElementChild.children.length * 30 + "px"
    var bsNav = new BScroll(this.$refs.navbar, {
      // eventPassthrough: 'horizontal',
      scrollX: true
    })
    bsNav
    console.log(bsNav);
  }
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

dl {
  display: flex;
  height: 84px;
}

html,
body,
#app,
.content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.navbar {
  width: 100%;
  overflow: hidden;
}
.navbar ul {
  display: flex;
  flex-wrap: nowrap;
}

.navbar ul li {
  width: 30px;
  text-align: center;
  flex-shrink: 0;
}
</style>